<template>
    <div>
        <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
        <el-row>
            <el-col>
                <el-button type="primary" @click="showAddcatDialog">添加分类</el-button>
            </el-col>
        </el-row>
        <!-- 表格   -->
            <!-- 是否有效 -->
        <tree-table border :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" class="treeTable">
            <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen;"></i>
                <i class="el-icon-error" v-else style="color:red;"></i>
            </template>
            <!-- 排序 -->
            <template slot="order" slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.cat_level==1">二级</el-tag>
                <el-tag type="warning" size="mini" v-else>三级</el-tag>
                    
            </template>
            <!-- 操作 -->
            <template slot="opt" slot-scope="scope">
                <el-button icon="el-icon-edit" type="primary" size="mini" @click="cateEdit(scope.row)">编辑</el-button>
                <el-button icon="el-icon-search" type="danger" size="mini" @click="cateDelete(scope.row.cat_id)">删除</el-button>
            </template>
        </tree-table>
        <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[2, 5, 8, 10,20,50]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        width="50%"
        @closed="addCateDialogClosed">
        <!-- 添加分类表单 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
            <el-form-item label="分类名称：" prop="cat_name">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类：">
                <el-cascader
                v-model="selectKeys"
                :options="parentCateList"
                :props="cascaderProps"
                @change="parentCateChange"
                clearable filterable change-on-select>
                </el-cascader>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑 -->
       <el-dialog
        title="提示"
        :visible.sync="editeCateDialogVisible"
        width="50%"
        @closed="editClosed">
        <el-form :model="editInfo" :rules="editFormRules" ref="editFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="editInfo.cat_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editeCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editeCateDialog">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 商品分类列表
                cateList:[],
                // 总数据条数
                total:0,
                // 查询条件
                queryInfo:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                columns:[
                    // 第一列
                    {
                        label: '分类名称',
                        prop: 'cat_name',
                        width: '400px',
                    },
                    //第二列
                        // 表示将当前列设为模板列
                     {
                        label: '是否有效',
                        type: 'template',
                        template: 'isok',   //当前列的模板名称
                    },
                    //第三列
                     {
                        label: '排序',
                        type: 'template',
                        template: 'order',   //当前列的模板名称
                    },
                    //第四列
                     {
                        label: '操作',
                        type: 'template',
                        template: 'opt',   //当前列的模板名称
                    },
                ],
                // 控制添加分类对话框显示
                addCateDialogVisible:false,
                // 添加分类表单对象
                addCateForm:{
                    cat_name:'',
                    cat_pid:0,
                    cat_level:0
                },
                // 添加分类表单的规则
                addCateFormRules:{
                    cat_name:[{
                        required:true,
                        message:'请输入分类名称！',
                        trigger:'blur'
                    },
                    {
                        min: 2,
                        max: 12,
                        message: '分类名的长度在2~12个字符之间',
                        trigger: 'blur'
                    }
                    ]
                },
                // 父级分类的列表
                parentCateList:[],
                // 指定select配置对象
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger:'hover'
                },
                // 选中的父级分类的id数组
                selectKeys:[],
                // 打开编辑对话框
                editeCateDialogVisible:false,
                // 编辑信息
                editInfo:{
                    id:'',
                    cat_name:''
                },
                // 编辑规则
                editFormRules:{
                    cat_name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.getCateList()
        },
        methods: {
            // 获取商品分类数据
            async getCateList(){
               let {data:res} = await this.$http.get('categories',{params:this.queryInfo})
               if(res.meta.status!=200) return this.$message.error(res.meta.msg)
               this.cateList=res.data.result    //获取数据
               this.total=res.data.total    //总数据
            },
            // 监听页码改变事件
            handleSizeChange(newSize){
                this.queryInfo.pagesize=newSize
                this.getCateList()
            },
            // 监听页码数目的改变
            handleCurrentChange(newPage){
                this.queryInfo.pagenum=newPage
                this.getCateList()
            },
            // 点击按钮添加分类对话框
            showAddcatDialog(){
                this.getParentCateList() //获取父级数据分类列表
                this.addCateDialogVisible=true
            },
            // 获取父级分类的数据列表
            async getParentCateList(){
               let {data:res}=await this.$http.get('categories',{params:{type:2}})
               if(res.meta.status!=200) return this.$message.error(res.meta.msg)
                this.parentCateList=res.data
            },
            // select变化时触发
            parentCateChange(){
                /* 得到选中的id值，判断新添加的分类是否存在父级，
                    若数组selectKeys的length>0，则有父级，
                    对应为：已选父级分类/新增分类名
                */
               let select=this.selectKeys
               if(select.length>0){
                    //获得父级分类的id    
                  this.addCateForm.cat_pid = select[select.length-1]
                    // 为当前分类等级赋值
                  this.addCateForm.cat_level=select.length
                  return 
               }else{
                   this.addCateForm.cat_pid =this.addCateForm.cat_level=0
               }
               
            },
            // 点击确定添加新的分类
            addCate(){
                this.$refs.addCateFormRef.validate(async val=>{
                    if(!val) return
                    let {data:res}=await this.$http.post('categories',this.addCateForm)
                    if(res.meta.status!=201) return this.$message.error('添加分类失败！')
                    this.$message.success('添加分类成功！')
                    this.getCateList()
                    this.addCateDialogVisible=false
                })
            },
            // 监听对话框的关闭，重置表单数据
            addCateDialogClosed(){
                // 只清空form的数据，但select的不清空
                this.$refs.addCateFormRef.resetFields()
                // 清空select中的数据，同时清空addCateForm中的数据
                this.selectKeys=[]
                this.addCateForm.cat_level=this.addCateForm.cat_pid=0
            },
            // 删除分类
            async cateDelete(id){
                let confirmRes=await this.$confirm('是否删除该分类', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .catch(err=>err)
                if(confirmRes=='confirm'){
                    let {data:res}=await this.$http.delete('categories/'+id)
                    if(res.meta.status!=200) return this.$message.error('删除分类失败！')
                    this.$message.success('删除分类成功！')
                    this.getCateList()
                }
            },
            // 点击编辑按钮
            cateEdit(data){
                this.editInfo.id=data.cat_id
                this.editInfo.cat_name=data.cat_name
                this.editeCateDialogVisible=true
            },
            // 编辑对话框
            async editeCateDialog(){
                console.log(this.editInfo.id)
                let {data:res}=await this.$http.put('categories/'+this.editInfo.id,{cat_name:this.editInfo.cat_name})
                if(res.meta.status!=200) return this.$message.error('编辑分类失败！')
                this.$message.success('编辑分类成功！')
                this.getCateList()
                this.editeCateDialogVisible=false
            },
            // 编辑对话框关闭，清除数据
            editClosed(){
                this.$refs.editFormRef.resetFields()
                this.editInfo.id=this.editInfo.cat_name=''
            }
        },
    }
</script>

<style lang="less" scoped>
    .treeTable{margin-top: 15px;}
    .el-cascader{width: 100%;}
</style>